<template>
  <div class="hello">
    {{this.say}}

    <input type="text" v-model="person.firstName">
    <input type="text" v-model="person.lastName">
    <div>姓名：{{person.fullName}}</div>
    <div>
      <input type="text" v-model="person.fullName">
    </div>
  </div>

  <div>
    监听：<span>{{num}}</span>
    <button @click="addNum()">Add num</button>
  </div>
</template>

<script>
import { reactive, computed, watch, ref, watchEffect} from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    say: String
  },
  setup(props) {
    const person = reactive({
      firstName: '张',
      lastName: '三'
    })
    console.log(props)

    let num = ref(10)
    // person.fullName = computed(() => {  //简写版
    //   return person.firstName + person.lastName
    // })

    person.fullName = computed({  //完整版 计算出来的数据也是响应式的
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        console.log(value)
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })


    //如果监听多个值 第一个参数传递数组 第二个参数回调函数 第三个参数配置项 比如{immidiate: true}
    // watch(num, (newValue, oldValue) => {    //监听ref版本
    //   console.log('变化了', newValue, oldValue)
    // }) 
    //如果想监听reactive定义的变量中的某个值 watch的第一个参数要传一个函数函数的返回值为想要监听的数据 此时oldVal也是可以用的

    watch(() => person.firstName, (newVal, oldVal) => {
      console.log(`person的firstName变化了`,newVal, oldVal)
    })
    const addNum = () => {
      num.value ++
    }

    watchEffect(() => {
      let newName = person.firstName
      console.log(`firstName变了`, newName)
    })
    return {
      person,
      num,
      addNum
    }
  }

}
</script>
